<template>
    <div>

      <el-card>

        <el-table
          :data="tableConfigData"
          max-height="700px"
          height="700px"
          style="width: 100%">

          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>

          <el-table-column
            prop="code"
            label="配置代码"
          >
          </el-table-column>

          <el-table-column
            prop="value"
            label="数据值"
          >
          </el-table-column>

          <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button @click="selectConfig(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
              <el-button @click="openUpdConfig(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            </template>
          </el-table-column>

        </el-table>

      </el-card>


      <!--弹出框-->
      <el-dialog
        top="20px"
        :title="defaultValue.title"
        :visible="tableConfig.dictShow"
        @close="tableConfig.dictShow = false"
        :show-close="tableConfig.showClose"
        :destroy-on-close="tableConfig.destroyOnClose"
        width="1100px">

        <el-form ref="formConfig" :model="formConfig" label-width="180px">
          <el-form-item label="名称" >
            <el-input v-model="formConfig.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="代码" prop="code" >
            <el-input v-model="formConfig.code" disabled></el-input>
          </el-form-item>
          <el-form-item label="数据值" prop="name" >
            <el-input v-model.trim="formConfig.value" :disabled="defaultValue.saveUpdSelect === 'select'" ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="describe" >
            <el-input v-model.trim="formConfig.remark" :disabled="defaultValue.saveUpdSelect === 'select'" type="textarea"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="tableConfig.dictShow = false">关闭</el-button>
          <el-button type="primary" @click="updConfig" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
        </span>

      </el-dialog>

    </div>
</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils";

  export default {
    name: "Config",
    components: {

    },
    data(){
      return {
        // 配置信息表格
        tableConfigData: [],
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          dictShow: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 提交的数据
        formConfig: {
          id: null,
          name: null,
          userId: null,
          code: null,
          value: null,
          remark: null,
        },
      }
    },
    methods: {
      /**
       * 更新配置
       */
      updConfig(){
        clearInvalid(this.formConfig)
        http.post("/config/updConfig", this.formConfig).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.getConfigList()
          // 关闭弹出框
          this.initConfig()
          this.tableConfig.dictShow = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置初始化提交代码
       */
      initConfig(){
        this.formConfig = {

        }
      },
      /**
       * 查看配置信息
       */
      selectConfig(row){
        this.formConfig = row
        this.defaultValue.saveUpdSelect = "select"
        this.defaultValue.title = '配置详情'
        this.tableConfig.dictShow = true
      },
      /**
       * 打开配置修改弹出框
       * @param row 当前行数据
       */
      openUpdConfig(row){
        this.formConfig = row
        this.defaultValue.saveUpdSelect = "upd"
        this.defaultValue.title = '配置修改'
        this.tableConfig.dictShow = true
      },
      /**
       * 查询配置列表
       */
      getConfigList(){
        http.post("/config/getConfigList", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          let data = res.data;
          this.tableConfigData = data;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['默认配置'])
      this.getConfigList()
    },
  }
</script>

<style scoped>

</style>
